<template>
  <div class="stacked-line-chart-view">
    <!-- 为工单客户满意度时显示 -->
    <div v-show="satisfactionDegree" class="stacked-line-switch">
      <div>
        <span class="title">{{title}}</span>
      </div>
      <div class="stacked-line-switch-child">
        <chart-task-option-setting
          :chart-option="chartOption"
          :chart-type="chartType"
          type="LINE"
          @fetchChartData="fetchChartData"
        />
      </div>
    </div>
    
    <stats-chart-empty class="stacked-line-chart" v-show="isEmpty">
      暂无数据
    </stats-chart-empty>
    <!-- 图表 -->
    <div v-show="!isEmpty" id="StackedLineChart" class="stacked-line-chart" />
  </div>
</template>

<script>
import * as echarts5 from 'echarts5';
import { ref, watch, computed, onMounted, onUnmounted, nextTick } from 'vue';
import { useStackedLineChartData } from './useChartData'
/* components */
import {
  ChartTaskOptionSetting
} from './common/index';
import StatsChartEmpty from '@src/modules/report/common/StatsChartEmpty.vue';
/* util */
import { isEmpty as isEmptyFunction, isArray } from '@src/util/type';
/* mixins */
import ChartsMixin from '@src/modules/report/managementReport/charts/components/mixins/charts.mixins';

export default {
  name: 'stacked-line-chart',
  mixins: [ChartsMixin],
  components: {
    ChartTaskOptionSetting,
    StatsChartEmpty
  },
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    chartOption: {
      type: Object || String
    },
    chartType: {
      type: String,
			default: ''
    }
  },
  setup(props, { emit }) {
    const chart = ref(null)
    const isEmpty = ref(false);

    const chartData = computed(() => {
      return props.chartData
    })
    watch(chartData, (n,o) => {
      drawChart()
    })

    function drawChart() {
      const { data, legendData, xAxisData } = useStackedLineChartData(props.chartData)
      
      if (isArray(data?.value)) {
        isEmpty.value = isEmptyFunction(data?.value) || data.value.every(item => {
          return isArray(item.data) ? item.data.every(item => !item) : true
        })
      }
      
      if (isEmpty.value) return
      
      const dataOption = {
        tooltip: {
          trigger: 'axis',
          confine: true,
          enterable: true,
          appendToBody: true,
          axisPointer: {
            type: 'shadow'
          },
        },
        legend: {
          x: 'center',
          data: legendData.value,
          type: 'scroll',
          width: 1000
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { interval: 0, rotate: 30 },
          data: xAxisData.value
        },
        yAxis: {
          type: 'value',
          name: '%'
        },
        series: data.value
      }

      chart.value.clear()
      chart.value.setOption(dataOption)
      nextTick(() => {
        chart.value.resize()
      })
    }
    const initChart = () => {
      chart.value = echarts5.init(
        document.getElementById('StackedLineChart'),
        'shb'
      )

      chart.value.on('click', value => {

        emit('fetchTableData', value, 'Line')
      })

      drawChart()
    }
    
    // 工单客户满意度
    let satisfactionDegree = ref(false)
    if (props.chartType === 'task-customer-satisfaction') {
      satisfactionDegree.value = !satisfactionDegree.value
    }

    const fetchChartData = (value) => {      
      emit('fetchChartData', value)
    }
    
    onMounted(() => {
      initChart()
    })

    onUnmounted(() => {
      if(!chart.value) return

      chart.value = null;
    })

    return {
      satisfactionDegree,
      fetchChartData,
      chart,
      isEmpty,
      initChart
    }
  }
};
</script>

<style lang="scss" scoped>
.stacked-line-switch {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  height: 50px;
  line-height: 50px;
  .title {
    font-weight: bold;
  }
  .stacked-line-switch-child {
    flex: 1;
    text-align: right;
  }
}
.stacked-line-chart {
  width: 100%;
  min-height: 352px;
}

.stacked-line-chart-view {
  position: relative;
  min-height: 352px;
  .stats-chart-empty {
    margin-right: 0;
    margin-left: 0;
    
    position: relative;
    left: inherit;
  }
}
</style>
